<template>
	<view class="package">
		<view class="space-between" style="height: 166rpx;">
			<view class="direction-start" @click="navTo('gemstone/gemDetail')">
				<view>蓝宝石</view>
				<view style="font-size: 60rpx;font-weight: 500;color: #1B91FF;">{{userInfo.gem}}
				</view>
			</view>
			<view class="direction-start" style="width:50%;" @click="navTo('gemstone/shopList')">
				<view style="font-size: 36rpx;">车上生活</view>
				<view style="font-size: 24rpx;color: #666666;margin-top:10rpx;">多种福利品等你来拿</view>
			</view>
		</view>
		<view class="space-between" style="height: 166rpx;">
			<!-- <view class="direction-start" style="width:50%;" @click="navTo('gemstone/shopList?type=pay')">
				<view style="font-size: 36rpx;">优惠购</view>
				<view style="font-size: 24rpx;color: #666666;margin-top:10rpx;">优惠好物等您来拿</view>
			</view> -->
			<view class="direction-start" style="width:50%;" @click="navTo('gemstone/exchange')">
				<view style="font-size: 36rpx;">待提货 <text style="font-size: 48rpx;">{{num}}</text></view>
				<view style="font-size: 24rpx;color: #666666;margin-top:10rpx;">已获得的福利品</view>
			</view>
		</view>
	</view>
	<view class="package">
		<view class="center top">
			<text></text>
			福利活动
		</view>
		<view class="center list" v-for="(item,index) in activeList" :key="index" :style="{background:item.bg_color}"
			@click="jump(item.page)">
			<view :style="{background:item.status_color,color:item.title_color}">{{item.status_text}}</view>
			<view class="direction-start" style="width:80%;margin-left:15rpx;">
				<text style="font-size: 36rpx;" :style="{color:item.title_color}">{{item.title}}</text>
				<text style="font-size: 26rpx;margin-top:10rpx;"
					:style="{color:item.subtitle_color}">{{item.subtitle}}</text>
			</view>
			<view class="but" :style="{background:item.button_color}">
				{{item.button_text}}
			</view>
		</view>
		<!-- v-if="show" -->
		<view class="center list" @click="open()" style="background:linear-gradient(90deg, #C0EFFF,#D7F5FF)"
			v-if="show">
			<view style="background:#91DCF6;color:#379BDF">进行中</view>
			<view class="direction-start" style="width:80%;margin-left:15rpx;">
				<text style="color:#0F8BFF;font-size: 36rpx;">蓝宝石首充膨胀</text>
				<text style="color:#4A84B5;font-size: 26rpx;margin-top:10rpx;">{{gemBei}}倍蓝宝石等您来拿</text>
			</view>
			<view class="but" style="background:linear-gradient(180deg, #28BCF3,#2A9BFB)">
				去膨胀
			</view>
		</view>
	</view>
	<!-- 验证信息得膨胀蓝宝石 -->
	<TestVerify ref="phone" @confirm="confirm" :gemBei="gemBei"></TestVerify>
	<!-- 底部功能按钮 -->
	<bottomFil :active="3"></bottomFil>
</template>

<script setup lang="ts">
	import { navTo } from '@/utils/navigator';
	import TestVerify from '@c/mine/testVerify.vue';
	import { getActivityGem } from '@/gql/account';
	import { ref } from 'vue';
	import bottomFil from '@c/pobulic/bottomFil.vue';
	import { onShow } from '@dcloudio/uni-app';
	import { useUserStore } from '@/stores/user';
	import { toPublish } from '@mqtt';
	import { getDriverGoodsCount, getActivityList } from '@/gql/gemstone';
	import { getDriverID } from '@/stores/driverID';
	const driver_id = getDriverID();
	const userInfo = useUserStore();
	const num = ref()
	const activeList = ref()
	const phone = ref(null)
	const show = ref(false)
	const gemBei = ref()
	onShow(() => {
		userInfo.gemstone()
		init()
		actives()
		inits()
	})
	function init() {
		const payload = {
			query: getDriverGoodsCount,
			variables: {
				driver_id,
			},
		};
		toPublish(
			'ql/score/getDriverGoodsCount',
			payload,
			(obj : any) => {
				const { getDriverGoodsCount } = obj.data;
				num.value = getDriverGoodsCount.goods_nums;
			}
		);
	}
	function actives() {
		const payload = {
			query: getActivityList,
		};
		toPublish(
			'ql/score/getActivityList',
			payload,
			(obj : any) => {
				const { getActivityList } = obj.data;
				activeList.value = getActivityList;
			}
		);
	}
	function inits() {
		const payload = {
			query: getActivityGem,
			variables: { driver_id },
		};
		toPublish('ql/score/getActivityGem', payload, (obj) => {
			const { getActivityGem } = obj.data;
			gemBei.value = getActivityGem.gem_bei
			if (getActivityGem.nums) {
				show.value = true
			} else {
				show.value = false
			}
		});
	}
	function open() {
		phone.value.open()
	}
	function confirm() {
		inits()
	}
	function jump(url : string) {
		uni.navigateTo({ url });
	}
</script>

<style scoped lang="less">
	.top {
		text {
			width: 6rpx;
			height: 32rpx;
			background: #3699FF;
			border-radius: 3rpx;
			margin-right: 10rpx;
		}

		font-size: 36rpx;
	}

	.list:nth-last-child(1) {
		margin-bottom: 0px;
	}

	.list {
		width: 100%;
		height: 155rpx;
		border-radius: 20rpx;
		position: relative;
		padding: 20rpx;
		box-sizing: border-box;
		margin: 15rpx 0px;

		view:nth-of-type(1) {
			width: 106rpx;
			height: 32rpx;
			border-radius: 0px 20rpx 0px 20rpx;
			font-size: 22rpx;
			position: absolute;
			top: 0px;
			right: 0px;
			text-align: center;
		}

		view:nth-of-type(2) {
			width: 160rpx;
			height: 120rpx;
			border-radius: 20rpx;

			image {
				width: 160rpx;
				height: 120rpx;
				border-radius: 20rpx;
			}
		}

		.but {
			width: 136rpx;
			height: 58rpx;
			background: linear-gradient(-66deg, #FF5700, #FE0000);
			border-radius: 10rpx;
			text-align: center;
			line-height: 58rpx;
			color: #FFFFFF;
		}
	}
</style>